<template>
  <navbar :isBack="true" title="报名查询"></navbar>
  <search :title="info.title" placeholder="输入证件号" @change="change"></search>

  <view class="line"></view>
  <view class="find flex-direction-column" v-if="info.params.key_word && info.form">
    <view class="title">查询结果</view>
    <view class="list flex-direction-column">
      <view class="item flex">
        <view class="left">姓名</view>
        <view class="right">{{ info.form.name }}</view>
      </view>
      <view class="item flex" v-if="info.form.id_card">
        <view class="left">身份证号</view>
        <view class="right">{{ info.form.id_card }}</view>
      </view>
      <view class="item flex">
        <view class="left">组别</view>
        <view class="right">{{ info.form.group }}</view>
      </view>
    </view>
  </view>
  <picture
    v-else
    bg="#fff"
    :title="lack[lackIndex].title"
    :imgPath="lack[lackIndex].imgPath"
    :imgHeight="lack[lackIndex].imgHeight"
    :imgWidth="lack[lackIndex].imgWidth"
    :height="tools.clientTopHight(140)"
  ></picture>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getEnrollQuery, getEnrollQueryDo } from '@/service/api/index'
import tools from '@/utils/tools'
import search from '@/common/menu/query.vue'
const lack = [
  {
    imgWidth: '334rpx',
    imgHeight: '192rpx',
    title: '您还未查询，请输入关键词查询吧~',
    imgPath: '/pagesA/static/image/21.png'
  },
  {
    imgWidth: '360rpx',
    imgHeight: '200rpx',
    title: '暂无查询结果',
    imgPath: '/pagesA/static/image/22.png'
  }
]

let lackIndex = ref(0)
let info = reactive({
  title: '',
  params: {
    id: 0,
    key_word: ''
  },
  form: null
})

const change = (e) => {
  info.params.key_word = e
  // 查询
  getEnrollQueryDoApi()
}

// 页面数据
const getEnrollQueryApi = async (id) => {
  const { msg } = await getEnrollQuery({ id })
  info.params.id = msg.id
  info.title = msg.name
  console.log(msg)
}

// 查询
const getEnrollQueryDoApi = async () => {
  const { msg } = await getEnrollQueryDo(info.params)
  console.log(msg)
  if (!msg) return (lackIndex.value = 1)
  info.form = msg
}

onLoad((option) => {
  // 页面数据
  getEnrollQueryApi(option.id)
})
</script>

<style lang="scss" scoped>
.find {
  .title {
    height: 44rpx;
    font-size: 32rpx;
    margin-top: 44rpx;
    font-weight: bold;
    line-height: 44rpx;
    text-align: center;
  }
  .list {
    margin: 0 26rpx;
    margin-top: 46rpx;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    .item {
      height: 80rpx;
      font-size: 28rpx;
      line-height: 80rpx;
      border-bottom: 1px solid #eeeeee;
      &:last-child {
        border-bottom: none;
      }
      .left {
        width: 258rpx;
        color: #666666;
        text-align: center;
        background-color: #fcfcfc;
        border: 1px solid #eee;
      }
      .right {
        width: 222px;
        text-align: center;
        // border: 1px solid #eeeeee;
        // border: 1px solid #eeeeee;
        // border-left: none;
      }
    }
  }
}
</style>
